import { Button, Tag, Divider, Dropdown, Form, Icon, Menu, message, Avatar, Table, PageHeader, Popover, Tooltip, Breadcrumb } from 'antd';
import React, { useState, useRef, useEffect, useContext } from 'react';
import { connect } from 'dva';
import styles from './index.less';
import { stringToDate } from "@/generic/Utils";
import { DIR_OBJECT, FILE_OBJECT } from "@/generic/ConfigParams";
import TrashOptions from "./TrashOptions";


const createColumns = (isMobile=false) => {

    const nameWidth = isMobile ? "55%" : "35%";
    const columns = [
        { 
            key: '0', title: "名称", dataIndex: 'name', ellipsis: true, width: nameWidth,
            render: (_, record) => (
                <>
                    <span onClick={() => nameClick(record)} style={{ cursor: "pointer", display: "contents" }}>
                        <Icon theme={DIR_OBJECT.theme}
                            style={{ color: (record.isDir ? DIR_OBJECT.color : FILE_OBJECT.color) }}
                            type={(record.isDir ? DIR_OBJECT.icon : FILE_OBJECT.icon)} />
                        <span style={{ marginLeft: "3px" }}>{record.name}</span>
                    </span>
                </>
            ),
        },
        { key: '1', title: "删除时间", dataIndex: 'removed', },
    ];
    if (!isMobile) {
        const orgCol = {
            key: '2', title: "原始位置", dataIndex: 'orgPath', ellipsis: true, width: "45%", 
            render: (_, record) => (
                <>
                    <span style={{ display: "contents" }}>{record.orgPath}</span>
                    {
                        !isMobile &&
                        <span style={{ float: "right" }}>
                            <Tag color={record.disk == "pub" ? "volcano" : "blue"}>{record.disk}</Tag>
                        </span>
                    }
                </>
            ),
        };
        columns.push(orgCol);
    } 

    return columns;
}

const dataAdapter = (data, separator='/') => {
    // console.log("====>> data", data)
    const result = [];
    separator = "\\";
    if (data instanceof Array) {
        data.forEach((item, i) => {

            result.push({
                key: i,
                userid: item.userID,
                name: item.orgPath.split(separator).pop(),
                orgPath: item.orgPath,
                disk: item.diskID,
                removed: stringToDate(item.removeAt),
                isDir: item.isDir,
            });
        })

        return result;
    }
    console.error("需要Array类型数据！");
    return [];
}

const TrashTable = props => {

    const { dispatch, demoDta, isMobile } = props;
    const [data, setData] = useState([]);

    useEffect(() =>{
        // console.log("===>> props", props)
        dispatch({
            type: "trash/fetchTable",
            payload: {}
        })
    }, [])

    useEffect(()=>{

        demoDta.length > 0 && setData(dataAdapter(demoDta));
    }, [demoDta])

    useEffect(() => {

        dispatch({
            type: "trash/UpdateIsMobile",
            payload: { size: document.body.clientWidth}
        })
    }, [document.body.clientWidth])

    return (
        <>
            <TrashOptions
                className={styles.headerOptions}
                batchOpts={{}}
                onSearch={(newData) => {
                    console.log("===>> newData", newData)
                }}
                {...props}
            />
            <Table
                className={styles.filesTable}
                rowSelection={{}}
                columns={createColumns(isMobile)}
                dataSource={data}
            />
        </>
    );
}

export default connect(({ trash }) => ({
    demoDta: trash.data,
    isMobile: trash.isMobile
}))(TrashTable);
